<template>
  <q-dialog v-model="isShow">
    <tool-detail-card :data="data"
                      class="no-margin" text-color="black"
                      width="480px" height="auto"></tool-detail-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import ToolDetailCard from '../../components/tool/ToolCardDetail.vue'
import { Tool } from 'src/store/tool/state'

export default defineComponent({
  name: 'ToolDetailDialog',
  components: {
    ToolDetailCard
  },
  async preFetch ({
    store,
    currentRoute
  }) {
    await store.dispatch('tool/initCurrentTool', currentRoute.params.toolId)
  },
  data () {
    return {
      isShow: true,
      from: null
    }
  },
  computed: {
    data (): Tool {
      return this.$store.state.tool.currentTool as Tool
    }
  },
  methods: {},
  watch: {
    isShow (value) {
      if (!value) {
        this.$router.push({
          name: 'AppIndex',
          params: {
            index: this.$route.params.index
          },
          query: this.$route.query
        })
      }
    }
  }
})
</script>

<style lang="scss">

</style>
